import React from "react";
import { Code } from "../../Code";
import "./style.css";
export default function Index() {
  return (
    <div className="page column">
      <div className="sub-title">性能优化-2</div>
      <p>
        避免无意引发反复重绘重排,
        <a href="https://gist.github.com/paulirish/5d52fb081b3570c81e3a">
          什么会导致重绘/重排？
        </a>
      </p>

      <div className="cover">
        <div>
          <div>bad case:</div>
          <Code lang="js">
            {`function initP() {
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.width = box.offsetWidth + 'px';
    }
}
//作者：奶茶好喝不胖(zhihu)`}
          </Code>
        </div>
        <div>
          <div>good case:</div>
          <Code lang="js">{`const width = box.offsetWidth;
function initP() {
    for (let i = 0; i < paragraphs.length; i++) {
        paragraphs[i].style.width = width + 'px';
    }
}
//作者：奶茶好喝不胖(zhihu)`}</Code>
        </div>
      </div>
    </div>
  );
}
